<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 适配手机端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Document</title>
</head>


<!-- react核心库 -->
<script src="../React-js/react.development.js"></script>
<!-- 操作DOM支持库 -->
<script src="../React-js/react-dom.development.js"></script>
<!-- babel转换库  jsx-js -->
<script src="../React-js/babel.min.js"></script>


<body>
    <div id="test"></div>
    <script type="text/babel">
        
        // 创建函数式组件
        function Dom(){
            return <h1>我是函数定义组件（适用于简单组件的定义）</h1>
        }
        // 组件渲染到页面
        ReactDOM.render(<Dom/>,document.getElementById('test'))

        //注意事项：
        /*
        1.组件的首字母必须是大写，并且有返回值
        2.在渲染的时候必须<组件名 />
        */

       //执行过程：
       //1.React解析组件标签，找到相应的组件。
       //2.发现组件是函数定义的，随后调用函数，
       //3.将返回的虚拟DOM转化为真实DOM,随后呈现在页面中。
    </script>    
</body>
</html>